<template>
  <div class="contain">
    <div class="content">
      <div class="dailyList">
        <p class="list_title">附近人的日常</p>
        <div class="list_item">
          <div class="item" style="background: url(https://t7.baidu.com/it/u=434167918,556047282&fm=193&f=GIF);background-size: 100%;">
            <div class="avatar">
              <img src="https://t7.baidu.com/it/u=128764686,1887614532&fm=193&f=GIF" alt="">
            </div>
            <div class="name">褪了色旳回憶</div>
          </div>
          <div class="item" style="background: url(https://t7.baidu.com/it/u=124476473,2583135375&fm=193&f=GIF);background-size: 100%;">
            <div class="avatar">
              <img src="https://t7.baidu.com/it/u=2405382010,1555992666&fm=193&f=GIF" alt="">
            </div>
            <div class="name">囚鸟不知海</div>
          </div>
          <div class="item" style="background: url(https://t7.baidu.com/it/u=2084624597,235761712&fm=193&f=GIF);background-size: 100%;">
            <div class="avatar">
              <img src="https://t7.baidu.com/it/u=2587880631,1511870074&fm=193&f=GIF" alt="">
            </div>
            <div class="name">时光泛黄了照片</div>
          </div>
          <div class="item" style="background: url(https://t7.baidu.com/it/u=1527949733,2791156519&fm=193&f=GIF);background-size: 100%;">
            <div class="avatar">
              <img src="https://t7.baidu.com/it/u=3186654957,2538175951&fm=193&f=GIF" alt="">
            </div>
            <div class="name">人潮拥挤,我挤死你</div>
          </div>
        </div>
      </div>

      <div class="dailyList">
        <p class="list_title">打卡日常</p>
        <div class="list_item">
          <div class="item" style="background: url(https://t7.baidu.com/it/u=1794963468,2922759658&fm=193&f=GIF);background-size: 100%;">
            <div class="avatar">
              <img src="https://t7.baidu.com/it/u=3770252220,3854508505&fm=193&f=GIF" alt="">
            </div>
            <div class="name">花田与歌</div>
          </div>
          <div class="item" style="background: url(https://t7.baidu.com/it/u=4106259161,2139743609&fm=193&f=GIF);background-size: 100%;">
            <div class="avatar">
              <img src="https://t7.baidu.com/it/u=573156471,2870434407&fm=193&f=GIF" alt="">
            </div>
            <div class="name">小生不菜</div>
          </div>
          <div class="item" style="background: url(https://t7.baidu.com/it/u=3203007717,1062852813&fm=193&f=GIF);background-size: 100%;">
            <div class="avatar">
              <img src="https://t7.baidu.com/it/u=1220029698,1592514149&fm=193&f=GIF" alt="">
            </div>
            <div class="name">未有期,鱼遇海</div>
          </div>
          <div class="item" style="background: url(https://t7.baidu.com/it/u=3690528415,706188365&fm=193&f=GIF);background-size: 100%;">
            <div class="avatar">
              <img src="https://t7.baidu.com/it/u=1769523171,2909907456&fm=193&f=GIF" alt="">
            </div>
            <div class="name">梦里清欢</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  setup() {

  }
}
</script>

<style scoped>
.contain{
  width: 100%;
  height: 100%;
  min-height: 100vh;
  background: #000;
  box-sizing: border-box;
  color: blue;
  margin-top: 200px;
  z-index: -1;
  padding: 20px 10px;

}
.content{
  margin-top: 80px;
  width: 100%;

}
.dailyList{
  width: 100%;
  margin-bottom: 20px;
  /* display: flex; */
  /* background-color: red; */
}
.list_title{
  margin-bottom: 10px;
  color: rgb(162, 163, 163);
  letter-spacing: 1px;
  font-weight: bold;
  font-family:'Courier New';
}
.list_item{
  width: 100%;
  height: 200px;
  overflow-y: hidden;
  overflow-x: scroll;
  white-space: nowrap;

}
.item{
  width: 150px;
  height: 100%;
  display: inline-block;
  margin-right: 10px;
  border-radius: 10px;
}

.avatar{
  margin-top: 110px;
  margin-left: calc(50% - 20px);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
}
.avatar img{
  width: 100%;
}
.name{
  font-size: 13px;
  width: 80px;
  color: #fff;
  margin-top: 15px;
  text-align: center;
  margin-left: calc(50% - 40px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>